import React, { Component } from 'react';
import { Table, Tag, Space } from 'antd';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';

import { Stage, Layer, Text, Image, Line, Label, Rect } from 'react-konva';

@connect(({ ds }) => ({ ds }))
@Form.create()
class HdIO extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    selectedRowKeys:[],
    loading: false,
  };

  setCamOPStart = e => {
    const { dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    dispatch({
      type: 'cj/setCamOPStart',
      payload: selectedRowKeys,
    });
  };
  
  setCbjOPStart = e => {
    const { dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    dispatch({
      type: 'cbjt/setCbjOPStart',
      payload: selectedRowKeys,
    });
  };

  setBigCutterOPStart = e => {
    const { dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    dispatch({
      type: 'fccc/setBigCutterOPStart',
      payload: selectedRowKeys,
    });
  };

  setSmallCutterOPStart = e => {
    const { dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    dispatch({
      type: 'bccc/setSmallCutterOPStart',
      payload: selectedRowKeys,
    });
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const Panel = Collapse.Panel;
    const {
      selectedRowKeys,
      loading,
    } = this.state;
    const rowSelection1 = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const rowSelection2 = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const rowSelection3 = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const rowSelection4 = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns1 = [
      {
        title: 'In',
        dataIndex: 'In',
        key: 'In',
      },
      {
        title: formatMessage({ id: 'app.tools.Start' }),
        dataIndex: 'start',
        key: 'start',
      },
      {
        title: formatMessage({ id: 'app.tools.Comment' }),
        dataIndex: 'annotation',
        key: 'annotation',
      },
    ];
    const columns2 = [
      {
        title: 'key',
        dataIndex: 'key',
        key: 'key',
      },
      {
        title: 'OP',
        dataIndex: 'OP',
        key: 'OP',
      },
      {
        title: formatMessage({ id: 'app.tools.Start' }),
        dataIndex: 'start',
        key: 'start',
      },
      {
        title: formatMessage({ id: 'app.tools.Comment' }),
        dataIndex: 'annotation',
        key: 'annotation',
      },
    ];
    const gridStyle1 = {
      width: '40%',
      textAlign: 'left',
    };
    const { 
      camZmcIOStates,
      camZmcOPStates,
      cbjZmcIOStates,
      cbjZmcOPStates,
      bigCutterZmcIOInfo,
      bigCutterZmcOPStates,
      smallCutterZmcIOInfo,
      smallCutterZmcOPStates,
       } = this.props.ds;

    return (
      <>
        <Collapse onChange={this.callback} style={{ marginLeft: 10, marginTop: 50 }}>
          <Panel header={formatMessage({ id: 'app.tools.FeedingInputSignal' })} key="1">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.FeedingInputSignal' })}</font>}>
              <Table dataSource={camZmcIOStates} columns={columns1} size="default"/>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.FeedingOutputSignal' })} key="2">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.FeedingOutputSignal' })}</font>}>
            <div>
                <div
                  style={{
                    marginBottom: 16,
                  }}
                >
                  <Button type="primary" onClick={this.setCamOPStart} disabled={!hasSelected} loading={loading}>
                  {formatMessage({ id: 'app.tools.Change' })}
                  </Button>
                </div>
                <Table rowSelection={rowSelection1} columns={columns2} dataSource={camZmcOPStates} pagination='false'/>
              </div>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.CbjInputSignal' })} key="3">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CbjInputSignal' })}</font>}>
              <Table dataSource={cbjZmcIOStates} columns={columns1}  size="default"/>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.CbjOutputSignal' })} key="4">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CbjOutputSignal' })}</font>}>
            <div>
                <div
                  style={{
                    marginBottom: 16,
                  }}
                >
                  <Button type="primary" onClick={this.setCbjOPStart} disabled={!hasSelected} loading={loading}>
                  {formatMessage({ id: 'app.tools.Change' })}
                  </Button>
                </div>
                <Table rowSelection={rowSelection2} columns={columns2} dataSource={cbjZmcOPStates} pagination='false'/>
              </div>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.BigCutInputSignal' })} key="5">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.BigCutInputSignal' })}</font>}>
              <Table dataSource={bigCutterZmcIOInfo} columns={columns1}  size="default"/>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.BigCutOutputSignal' })} key="6">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.BigCutOutputSignal' })}</font>}>
            <div>
                <div
                  style={{
                    marginBottom: 16,
                  }}
                >
                  <Button type="primary" onClick={this.setBigCutterOPStart} disabled={!hasSelected} loading={loading}>
                  {formatMessage({ id: 'app.tools.Change' })}
                  </Button>
                </div>
                <Table rowSelection={rowSelection3} columns={columns2} dataSource={bigCutterZmcOPStates} pagination='false'/>
              </div>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.SmallCutInputSignal' })} key="7">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.SmallCutInputSignal' })}</font>}>
              <Table dataSource={smallCutterZmcIOInfo} columns={columns1}  size="default"/>
            </Card>
          </Panel>
          <Panel header={formatMessage({ id: 'app.tools.SmallCutOutputSignal' })} key="8">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.SmallCutOutputSignal' })}</font>}>
            <div>
                <div
                  style={{
                    marginBottom: 16,
                  }}
                >
                  <Button type="primary" onClick={this.setSmallCutterOPStart} disabled={!hasSelected} loading={loading}>
                  {formatMessage({ id: 'app.tools.Change' })}
                  </Button>
                </div>
                <Table rowSelection={rowSelection4} columns={columns2} dataSource={smallCutterZmcOPStates} pagination='bottomCenter'/>
              </div>
            </Card>
          </Panel>
        </Collapse>
      </>
    );
  }
}
export default HdIO;
